/* 引入Jura字体 */
/* @import url("http://fonts.googleapis.com/css?family=Jura:200,300,400,500,600,700,800,900"); */
@font-face {
    font-family: 'Jura';
    font-style: normal;
    font-weight: 300;
    /* src: url(http://fonts.gstatic.com/s/jura/v22/z7NOdRfiaC4Vd8hhoPzfb5vBTP0D7ZumR_0.ttf) format('truetype'); */
    src: url(fonts/z7NOdRfiaC4Vd8hhoPzfb5vBTP0D7ZumR_0.ttf) format('truetype');
}

@font-face {
    font-family: 'Jura';
    font-style: normal;
    font-weight: 400;
    /* src: url(http://fonts.gstatic.com/s/jura/v22/z7NOdRfiaC4Vd8hhoPzfb5vBTP1d7ZumR_0.ttf) format('truetype'); */
    src: url(fonts/z7NOdRfiaC4Vd8hhoPzfb5vBTP1d7ZumR_0.ttf) format('truetype');
}
@font-face {
    font-family: 'Jura';
    font-style: normal;
    font-weight: 500;
    /* src: url(http://fonts.gstatic.com/s/jura/v22/z7NOdRfiaC4Vd8hhoPzfb5vBTP1v7ZumR_0.ttf) format('truetype'); */
    src: url(fonts/z7NOdRfiaC4Vd8hhoPzfb5vBTP1v7ZumR_0.ttf) format('truetype');
}
@font-face {
    font-family: 'Jura';
    font-style: normal;
    font-weight: 600;
    /* src: url(http://fonts.gstatic.com/s/jura/v22/z7NOdRfiaC4Vd8hhoPzfb5vBTP2D6pumR_0.ttf) format('truetype'); */
    src: url(fonts/z7NOdRfiaC4Vd8hhoPzfb5vBTP2D6pumR_0.ttf) format('truetype');
}
@font-face {
    font-family: 'Jura';
    font-style: normal;
    font-weight: 700;
    /* src: url(http://fonts.gstatic.com/s/jura/v22/z7NOdRfiaC4Vd8hhoPzfb5vBTP266pumR_0.ttf) format('truetype'); */
    src: url(fonts/z7NOdRfiaC4Vd8hhoPzfb5vBTP266pumR_0.ttf) format('truetype');
}
  

*{
    margin: 0;
    padding: 0;
}
body{
    /* background-color: #0e141b; */
    background-color: #000;
    color: #e0e6eb;
    font-family: 'Jura';
    font-weight: 300;
    text-align: center;
    letter-spacing: 8px;
    overflow: hidden;
}
.column,
.colon{
    /* 行内块元素 */
    display: inline-block;
    font-size: 86px;
    line-height: 86px;
    /* 顶部对齐 */
    vertical-align: top;
}
.column{
    /* 设置过渡 */
    transition: 0.3s;
}
/* 冒号 */
.colon{
    /* 垂直居中（偏上一点） */
    transform: translateY(calc(50vh - 55px));
    /* 过渡 */
    transition: 0.3s;
}
.colon::after{
    content: ":";
}
/* 数字默认样式 */
.num{
    opacity: 0.25;
    transition: 0.5s;
}
/* 当前时间（正中间数字） */
.num.visible{
    opacity: 1;
    text-shadow: 1px 1px 0 #2c6299;
}
/* 邻近的 */
.num.near{
    opacity: 0.35;
}
/* 远的 */
.num.far{
    opacity: 0.15;
}
/* 更远的（越远越透明） */
.num.distant{
    opacity: 0.1;
}